<template>
  <page-header-wrapper
    :tab-list="repoTab.dataSource"
    :tab-active-key="repoTab.tabActiveKey"
    :tab-change="handleRepoTabChange">
    <a-tabs
      v-if="typeTab.dataSource.length > 0"
      :tab-active-key="typeTab.tabActiveKey"
      @change="handleTypeTabChange"
      type="card"
      tab-position="left">
      <a-tab-pane
        class="tab-pane"
        v-for="(item,index) in typeTab.dataSource"
        :key="index"
        :tab="item.tab">
        <a-card>
          <stuffTable
            ref="stuffTable"
            @refresh="getAllTypeList"
            :location="repoTab.dataSource[Number(repoTab.tabActiveKey)]"
            :stuffType="typeTab.dataSource[Number(typeTab.tabActiveKey)]"/>
        </a-card>
      </a-tab-pane>
    </a-tabs>
    <a-card v-else style="height: 200px">
      <a-empty
        image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
        :image-style="{
          height: '120px',
        }"
      >
        <span slot="description">暂时没有已入库的物品</span>
      </a-empty>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getRepoList, getTypeList } from '@/api/stuffManage'
import stuffTable from './components/stuffTable.vue'

export default {
  name: 'StuffManage',
  components: {
    stuffTable
  },
  data () {
    return {
      repoTab: {
        dataSource: [],
        tabActiveKey: '0'
      },
      typeTab: {
        dataSource: [],
        tabActiveKey: '0'
      }
    }
  },
  created () {
    this.getAllRepoList()
  },
  methods: {
    handleRepoTabChange (key) {
      this.repoTab.tabActiveKey = key
      this.typeTab.tabActiveKey = '0'
      this.getAllTypeList()
    },
    handleTypeTabChange (key) {
      this.typeTab.tabActiveKey = key
    },
    getAllRepoList () {
      const _this = this
      getRepoList()
      .then((res) => {
        _this.repoTab.dataSource = res.data.repoList
        _this.repoTab.dataSource.forEach((item, index, arr) => {
          arr[index] = {
            key: index.toString(),
            tab: item
          }
        })
       _this.getAllTypeList()
      })
      .catch((err) => {
        _this.$message.error(err.response.data.msg || { content: '获取仓库列表失败' })
      })
    },
    getAllTypeList () {
      const _this = this
      const dataSource = _this.repoTab.dataSource[Number(_this.repoTab.tabActiveKey)] || {}
      getTypeList({
        location: dataSource.tab
      })
      .then((res) => {
        _this.typeTab.dataSource = res.data.typeList
        _this.typeTab.dataSource.forEach((item, index, arr) => {
          arr[index] = {
            key: index.toString(),
            tab: item
          }
        })
      })
      .catch((err) => {
        _this.$message.error(err.response.data.msg || { content: '获取分类失败' })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.tab-pane {
  padding-left: 2%;
}
</style>
